<script setup lang="ts">
</script>

<template>
  <div class="mb-2 items-start gap-3 rounded-xl bg-white/7 p-4">
    <h4 class="mt-0">
      日期 + 时间选择器
    </h4>

    <div class="flex gap-2">
      <ADatePicker format="YYYY-MM-DD HH:mm" inputReadOnly showtime />
    </div>
  </div>

  <div class="mb-2 items-start gap-3 rounded-xl bg-white/7 p-4">
    <h4 class="mt-0">
      日期范围选择器
    </h4>

    <p class="text-sm text-gray">
      默认的时间范围选择器太大，在移动端的屏幕上放不下，所以对移动端做了些样式优化。
    </p>
    <p class="text-sm text-gray">
      在日期范围选择器打开的情况下拖动浏览器大小查看效果。
    </p>

    <div class="flex gap-2">
      <ARangePicker inputReadOnly visible />
    </div>
  </div>

  <div class="mb-2 items-start gap-3 rounded-xl bg-white/7 p-4">
    <h4 class="mt-0">
      日期+时间范围选择器
    </h4>

    <p class="text-sm text-gray">
      默认的时间范围选择器太大，在移动端的屏幕上放不下，所以对移动端做了些样式优化。
    </p>
    <p class="text-sm text-gray">
      在日期范围选择器打开的情况下拖动浏览器大小查看效果。
    </p>

    <div class="flex gap-2">
      <ARangePicker inputReadOnly showTime />
    </div>
  </div>
</template>

<style lang="scss">

</style>
